<template>
	<view class="container">
		<view class="input-box">
			<u--textarea v-model="inputContent" placeholder="有什么问题尽管问我" autoHeight></u--textarea>
			<!-- <input placeholder="有什么问题尽管问我" v-model="inputContent" /> -->
			<button style="margin-left: 10rpx;font-size: 24rpx;" @click="handleClick"><uni-icons type="help" size="18"></uni-icons>提问</button>
			<button @click="handleAbort" v-show="controller">取消</button>
		</view>
		<view class="msg-box">{{ outputContent }}</view>
		<xe-event-source ref="EventSourceRef" :url="eventSourceUrl" :options="eventSourceOptions"
			@callback="handleCallback"></xe-event-source>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputContent: "",
				outputContent: "",
				controller: null,
				token: '',
			}
		},
		computed: {
			eventSourceUrl() {
				return "http://192.168.11.144:8080/business1/sse/conversation";
			},
			eventSourceOptions({ inputContent, controller }) {
				return {
					...(controller ? { signal: controller.signal } : {}),
					openWhenHidden: true,
					headers: {
						Authorization: this.token,
						"Content-Type": "application/json; charset=UTF-8"
					},
					method: "POST",
					body: JSON.stringify({
						question: inputContent,
					}),
				}
			}
		},
		created() {
			this.token = uni.getStorageSync('token');
		},
		methods: {
			handleAbort() {
				this.controller.abort();
				this.controller = null;
			},
			handleClick() {
				if (!this.inputContent) return;
				this.controller = new AbortController();
				this.outputContent = "";
				this.$refs?.EventSourceRef?.send?.();
			},
			handleCallback(e) {
				console.log(e);
				const { type, msg, data } = e || {};
				if (type === "onerror") {
					return setTimeout(() => {
						this.handleClick();
					}, 10000);
				}
				if (type === "onclose") return console.log("AI answer completed.");
				if (type !== "onmessage") return;
				if (!data) return;
				// if (data === "[DONE]") return console.log("completed.");
				let tmpMsg = null;
				try {
					// tmpMsg = JSON.parse(data);
					tmpMsg = data;
				} catch (error) {
					console.warn(error);
				}
				if (tmpMsg) {
					// this.outputContent += tmpMsg?.content || "";
					this.outputContent += tmpMsg;
				}
			}
		}
	}
</script>

<style>
	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin-top: 10rpx;
	}

	.container .input-box {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 96vw;
		margin: 0 auto;
		/* border: 2rpx solid #eee; */
		border-radius: 4rpx;
		box-sizing: border-box;
		font-size: 26rpx;
	}

	.container .input-box input {
		width: 100%;
		padding: 0 24rpx;
	}

	.container .input-box button {
		flex-shrink: 0;
		font-size: 16px;
		border-radius: 4rpx;
		line-height: 32px;
	}

	.container .msg-box {
		width: 96%;
		padding: 20rpx 32rpx;
		margin: 20rpx 40rpx 20rpx 40rpx;
		box-sizing: border-box;
		font-size: 25rpx;
		background-image:linear-gradient(#dbdfeb,#e3ebf3);
		border-radius: 10rpx;
		line-height: 40rpx;
		white-space: pre-wrap; /* 保持空白符，包括换行 */
	}
</style>